<template>
  <div v-show="visible" :style="style[type]" class="xtx-message">
    <!-- 注意下 class属性能绑定字符串、对象或数组形式 (数组和字符串是绑定多个样式) -->
    <!--<i :class="[style[type].icon]" class="iconfont"></i>-->
    <i :class="style[type].icon" class="iconfont"></i>
    <span class="text">{{ text }}</span>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  name: 'XtxMessage',
  props: {
    type: {
      type: String,
      default: 'warn'
    },
    text: {
      type: String,
      default: ''
    }
  },
  setup() {
    const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        icon: 'icon-shanchu',
        color: '#F56C6C',
        backgroundColor: 'rgb(254, 240, 240)',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        icon: 'icon-queren2',
        color: '#67C23A',
        backgroundColor: 'rgb(240, 249, 235)',
        borderColor: 'rgb(225, 243, 216)'
      }
    }

    // 控制元素显示隐藏
    const visible = ref(false)

    onMounted(() => {
      visible.value = true
    })

    return {
      style,
      visible
    }
  }
}
</script>

<style lang="less" scoped>
// vue内置组件不起效果
.down {
  .down-enter-from {
    opacity: 0;
    transform: translateY(-100%);
  }

  .down-enter-active {
    transition: all 4s;
  }

  .down-enter-to {
    opacity: 1;
    transform: none;
  }
}

.xtx-message {
  position: fixed;
  top: 25px;
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%);

  width: 300px;
  height: 50px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  border-radius: 4px;
  // 使用原生的css制作动画
  animation: message 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

  i {
    margin-right: 4px;
    vertical-align: middle;
  }

  span {
    vertical-align: middle;
  }
}

@keyframes message {
  0% {
    transform: translate(-50%, -75px);
  }
  25% {
    transform: translate(-50%, 25px);
  }
  50% {
    transform: translate(-50%, 25px);
  }
  100% {
    transform: translate(-50%, -75px);
  }
}
</style>
